<template>
  <div class="serach">
    <!-- 商品搜索  .trim 去除字符串的头尾空格 -->
    <form action="/">
      <van-search class="goods-search" :autofocus='true' v-model.trim="value" show-action placeholder="商品搜索" @input="onSearch(value)" @cancel="onCancel" />
    </form>
    <!-- 第一个页面-初始页面 -->
    <div class="one" v-if="current == 'default'">
      <!-- 历史记录 -->
      <div class="history">
        <div class="top">
          <div class="title">历史记录</div>
          <img src="../../../assets/images/del-address.png" @click="delEvents" alt="">
        </div>
        <!-- 列表 -->
        <ul class="list">
          <li class="item" v-for='item in historyList' :key='item.id'>
            {{item.keyword}}
          </li>
        </ul>
      </div>
      <!-- 热门搜索 -->
      <div class="hotsearch">
        <div class="top">热门搜索</div>
        <!-- 列表 -->
        <ul class="list">
          <li class="item" v-for='item in hotKeywordList' :key='item.id' @click="hotEvents(item.keyword)">
            {{item.keyword}}
          </li>
        </ul>
      </div>
    </div>
    <!-- 第二个页面-搜索列表 -->
    <div class="two" v-else-if="current == 'list'">
      <ul class="list">
        <li class="item" v-for='item in searchList' :key='item.id' @click="searchEvents(item.name)">
          {{item.name}}
        </li>
      </ul>
    </div>
    <!-- 第三个页面-商品列表 -->
    <div class="three" v-else>
      <!-- 导航栏 -->
      <div class="nav">
        <div :class="navCurrent == 1 ? 'red' : ''" @click="navEvents(1)">综合</div>
        <div class="price" @click="navEvents(2)">
          <div class="name" :class="navCurrent == 2 ? 'red' : ''">价格</div>
          <div class="order">
            <van-icon size="5px" name="arrow-up" :class="orderCurrent == 'up' ? 'red' : ''" />
            <van-icon size="5px" name="arrow-down" :class="orderCurrent == 'down' ? 'red' : ''" />
          </div>
        </div>
        <div :class="navCurrent == 3 ? 'red' : ''" @click="navEvents(3)">分类</div>
      </div>
      <!-- 商品列表 -->
      <ul class="list">
        <li class="item" v-for='item in searchList' :key='item.id'>
          <img :src="item.list_pic_url" alt="">
          <div class="name">{{item.name}}</div>
          <div class="price">￥{{item.retail_price}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  helperaction,
  indexaction,
  addhistoryaction,
  clearhistoryAction,
} from "@/api/home/search";
export default {
  data() {
    return {
      value: "", // 搜索
      current: "default", // 3个页面切换 default list goods
      searchList: [], // 搜索列表
      navCurrent: 1, // 3个导航栏切换 1 2 3
      orderCurrent: "", // 价格切换 up down
      keyword: "", // 搜索提示接口传递的参数
      order: "", // 搜索提示接口传递的参数
      historyList: [], // 历史记录
      hotKeywordList: [], // 热门搜索
    };
  },
  // 计算
  computed: {},
  // 创建
  created() {},
  // 准备
  mounted() {
    // 关键词和搜索历史接口
    this.init();
  },
  // 方法
  methods: {
    init() {
      // 关键词和搜索历史接口
      indexaction({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        this.historyList = res.data.historyData;
        this.hotKeywordList = res.data.hotKeywordList;
      });
    },
    // 搜索提示接口
    goodsSearch() {
      helperaction({
        keyword: this.keyword, // 当前输入的值
        order: this.order, // 排序，价格从小到大(asc)或从大到小排序(desc)
      }).then((res) => {
        this.searchList = res.data.keywords;
      });
    },
    // 商品搜索 输入
    onSearch(val) {
      this.keyword = val;
      this.order = "";
      // 判断搜索输入值 是否为空
      if (val.length == 0) {
        this.current = "default";
      } else {
        this.current = "list";
        this.goodsSearch();
      }
    },
    // 商品搜索 取消
    onCancel() {
      // 取消搜索
      this.current = "default";
      this.init();
    },
    // 搜索列表
    searchEvents(val) {
      this.current = "goods";
      this.value = val;
      this.keyword = val;
      this.order = "";
      this.goodsSearch();
      // 搜索的关键词添加到数据库
      addhistoryaction({
        keyword: this.keyword,
        openId: localStorage.getItem("openId"),
      });
    },
    // 商品列表
    navEvents(val) {
      this.navCurrent = val;
      // 判断点击的是否是价格，并且判断orderCurrent是up还是down
      if (this.navCurrent == 2) {
        if (this.orderCurrent == "up") {
          this.orderCurrent = "down";
          this.order = "desc";
        } else {
          this.orderCurrent = "up";
          this.order = "asc";
        }
      } else {
        this.orderCurrent = "";
        this.order = "";
      }
      this.goodsSearch();
    },
    // 清空搜索历史
    delEvents() {
      clearhistoryAction({
        openId: localStorage.getItem("openId"),
      });
      this.historyList = [];
    },
    // 热门搜索
    hotEvents(val) {
      this.value = val;
      this.keyword = val;
      this.order = "";
      this.current = "list";
      this.goodsSearch();
    },
  },
};
</script>

<style lang='scss' scoped>
.serach {
  background-color: #fff;
  overflow: hidden;
  // 第一个页面-初始页面
  .one {
    background-color: #f4f4f4;
    // 历史记录
    .history {
      padding: 16px;
      background-color: #fff;
      .top {
        height: 27.5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
        img {
          width: 18px;
          height: 18px;
        }
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        .item {
          padding: 5px;
          border: 0.8px solid #999;
          margin: 0 15px 10px 0;
        }
      }
    }
    // 热门搜索
    .hotsearch {
      padding: 16px;
      background-color: #fff;
      margin-top: 10px;
      .top {
        text-align: left;
        margin-bottom: 15px;
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        .item {
          padding: 5px;
          border: 0.8px solid #999;
          margin: 0 15px 10px 0;
        }
        .item:first-child {
          border: 0.8px solid #b4282d;
          color: #b4282d;
        }
      }
    }
  }
  // 第二个页面-搜索列表
  .two {
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 0px;
    left: 0px;
    background-color: #fff;
    .list {
      padding: 0 16px;
      .item {
        text-align: left;
        padding: 10px 0;
      }
    }
  }
  // 第三个页面-商品列表
  .three {
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 0px;
    left: 0px;
    background-color: #fff;
    // 导航栏
    .nav {
      height: 39px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
      border-bottom: 0.8px solid #d9d9d9;
      .price {
        display: flex;
        align-items: center;
        .order {
          display: flex;
          flex-direction: column;
        }
      }
      .red {
        color: #b4282d;
      }
    }
    // 商品列表
    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        width: 50%;
        padding: 7.5px 0;
        border-right: 1px solid #d9d9d9;
        img {
          width: 151px;
          height: 151px;
          margin: 0 auto;
        }
        .name {
          margin: 7.5px auto 11px;
        }
        .price {
          margin: 15px auto;
          color: #b4282d;
          font-size: 14px;
        }
      }
    }
  }
}
</style>